<script setup>
import { ref ,onMounted} from 'vue';
import { AddressList, AddressEdit, Button, Icon, Toast, Dialog } from 'vant';
import axios from "@/utils/axios.js"

const chosenAddressId = ref('1');
const showEdit = ref(false);
const currentAddress = ref({});

const list = ref([
  {
    id: '1',
    name: '张三',
    tel: '13800138000',
    address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
    isDefault: true,
  },
  {
    id: '2',
    name: '李四',
    tel: '13900139000',
    address: '北京市朝阳区建国路 88 号现代城 A 座 2103',
  },
  {
    id: '3',
    name: '王五',
    tel: '13700137000',
    address: '上海市浦东新区张江高科技园区科苑路 88 号',
  },
]);

const init=()=>{
  axios.get(`api/userAddresses/getByIds/1`)
      .then(res=>{
        list.value = res.data
      })
}

onMounted(() => {
  // init()
})

// 以下是您需要实现的函数
const onAdd = () => {
  // 处理新增地址按钮点击
  showEdit.value = true;
};

const onEdit = (item, index) => {
  // 处理编辑地址按钮点击
  // item: 当前地址项
  // index: 地址项索引
  currentAddress.value = {
    id: item.id,                    // 地址ID
    name: item.name,                // 收货人姓名
    tel: item.tel,                  // 联系电话
    address: item.address,          // 详细地址
    isDefault: item.isDefault || false // 是否默认地址
  };

  // 显示地址编辑弹窗
  showEdit.value = true;
};

const onSave = (content) => {
  // 处理保存地址
  // content: 表单内容
  axios.post(`api/userAddresses/save`, content)
      .then(res=>{
        if(res.code === 200){
          ElMessage({
            message:res.msg,
            type:"success",
            duration:1500,
            onClose:()=>{
              init()
            }
          })
        }
      })
};

const onDelete = (item) => {
  // 处理删除地址
  // item: 当前地址项
  axios.get(`api/userAddresses/delete/${item.id}`)
      .then(res=>{
        if(res.code === 200){
          ElMessage({
            message:res.msg,
            type:"success",
            duration:1500,
            onClose:()=>{
              init()
            }
          })
        }
      })
};

const onSelect = (item) => {
  ElMessage({
    message:"功能开发中...",
    type:"warning",
  })
};

const onSetDefault = (item) => {
  // 处理设为默认地址
  // item: 当前地址项
};
const gogogo = () => {
  ElMessage({
    type:"warning",
    duration:1500,
    message:"功能待开发...."
  })
}
</script>

<template>
  <div  @click="gogogo">
  <div style="height: 46px;"></div>
  <van-nav-bar
      title="用户地址管理"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
      safe-area-inset-top
  />
  <div class="address-manager" >
    <!-- 地址列表 -->
    <van-address-list
        v-model="chosenAddressId"
        :list="list"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
        @select="onSelect"
    >
      <template #item-bottom="{ item }">
        <div class="address-actions">
          <van-Button
              size="small"
              plain
              type="primary"
              @click.stop="onEdit(item)"
          >
            编辑
          </van-Button>
          <van-Button
              size="small"
              plain
              type="danger"
              @click.stop="onDelete(item)"
          >
            删除
          </van-Button>
        </div>
      </template>
    </van-address-list>

    <!-- 添加/编辑地址弹窗 -->
    <van-AddressEdit
        v-if="showEdit"
        v-model="showEdit"
        :address-info="currentAddress"
        :area-list="{}"
        show-set-default
        show-delete
        @save="onSave"
        @delete="onDelete"
    />

    <!-- 底部添加按钮 -->
    <div class="add-button">
      <van-Button
          round
          type="primary"
          size="large"
          @click="onAdd"
      >
        <Icon name="add" size="24" />
        新增收货地址
      </van-Button>
    </div>
  </div>
  </div>
</template>

<style scoped>
.address-manager {
  padding-bottom: 80px;
}

.address-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

.add-button {
  bottom: 20px;
  left: 0;
  right: 0;
  padding: 0 16px;
}

:deep(.van-address-item .van-radio__icon) {
  display: none;
}

:deep(.van-address-item__edit) {
  display: none;
}

</style>